<template>
  <div id="navi">
    <index class="foreground"></index>
    <br/>
    <el-collapse-transition>
      <div v-show="isMain">
        <br/><br/>
        <siteIcon></siteIcon>
        <br/>
        <beautyNotes></beautyNotes>
      </div>
    </el-collapse-transition>
    <el-collapse-transition>
      <div v-show="!isMain">
        <panel id="todo-panel"/>
      </div>
    </el-collapse-transition>
    <background class="background"></background>
  </div>

</template>

<script>
import index from "@/components";
import background from "@/components/background";
import siteIcon from "@/components/site-icon";
import beautyNotes from "@/components/beauty-notes";
import Panel from "@/components/todo-list/panel";
export default {
  name: "navi-main",
  components: {
    Panel,
    index,
    background,
    siteIcon,
    beautyNotes,
  },
  data() {
    return {
      isMain: true,
    }
  },
  methods: {
    changeTodoOrMain() {
      this.isMain = !this.isMain
    }
  },
  mounted() {
    document.getElementById("navi").addEventListener('selectstart',function(e){
      e.preventDefault();
    });
    this.$bus.$on('changeTodoOrMain',this.changeTodoOrMain)
  }
}
</script>

<style>
.background {
  z-index: -1;
}
.foreground {
  z-index: 0;
}
</style>
